<template>
  <el-drawer v-model="visible" :with-header="header" append-to-body :title="title" direction="rtl" :size="width" @closed="closed">
    <div v-if="isLoading">加载中..</div>
    <slot v-else />
  </el-drawer>
</template>

<script lang="ts">
  export default { name: 'DarwerComponent' }
</script>
<script setup lang="ts">
  import { type PropsInterface } from './types/props'
  import { useDarwer } from './hook'
  const props = withDefaults(defineProps<PropsInterface>(), {
    width: () => '90%',
  })
  const emit = defineEmits(['update:open'])
  const visible = ref(false)
  // hook
  const { isLoading, useInnerLoading } = useDarwer(props)
  /**
   * 关闭
   */
  const closed = () => {
    emit('update:open', false)
  }

  onMounted(() => {
    visible.value = props.open
    useInnerLoading()
  })

  //   watch(
  //     () => props.open,
  //     (status) => {
  //       console.log(2222)
  //     }
  //   )
</script>
